<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<button id="explosionButton">Explosion</button>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript" src="SpriteAnimator.js"></script>
<script type="text/javascript" src="ImagePainter.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),
		explosionButton = document.getElementById('explosionButton'),

		BOMB_LEFT = 100,
		BOMB_TOP = 80,
		BOMB_WIDTH = 180,
		BOMB_HEIGHT = 130,

		NUM_EXPLOSION_PAINTERS = 9,
		NUM_FUSE_PAINTERS = 9,

	// Painters........................................................

		bombPainter = new ImagePainter('bomb.png'),
		bombNoFusePainter = new ImagePainter('bomb-no-fuse.png'),
		fuseBurningPainters = [],
		explosionPainters = [],

	// Animators.......................................................

		fuseBurningAnimator = new SpriteAnimator(
			fuseBurningPainters,
			function(){ bomb.painter = bombNoFusePainter; }
		),

		explosionAnimator = new SpriteAnimator(
			explosionPainters,
			function(){ bomb.painter = bombNoFusePainter; }
		),

	// Bomb.............................................................

		bomb = new Sprite('bomb', bombPainter);

// Functions.............................................................

	function resetBombFuse(){
		bomb.painter = bombNoFusePainter;
	}

// Event handlers........................................................

	explosionButton.onclick = function(e){
		if(bomb.animating) return; // Not now...

		// Burn fuse for 2 seconds
		fuseBurningAnimator.start(bomb, 2000);

		// Wait for 3 seconds, then explode for 1 second
		setTimeout(function(){
			explosionAnimator.start(bomb, 1000);

			// Wait for 2 seconds, then reset to the original bomb image
			setTimeout(function(){
				bomb.painter = bombPainter;
			}, 2000);
		}, 3000);
	};

// Animation..............................................................

	function animate(time){
		context.clearRect(0, 0, canvas.width, canvas.height);
		bomb.paint(context);
		window.requestNextAnimationFrame(animate);
	}

// Initialization............................................................

	bomb.left = BOMB_LEFT;
	bomb.top = BOMB_TOP;
	bomb.width = BOMB_WIDTH;
	bomb.height = BOMB_HEIGHT;

	for(var i = 0; i < NUM_FUSE_PAINTERS; ++i){
		fuseBurningPainters.push(
			new ImagePainter('fuse-0' + i + '.png');
		);
	}

	for(var i = 0; i < NUM_EXPLOSION_PAINTERS; ++i){
		explosionPainters.push(
			new ImagePainter('explosion-0' + i + '.png');
		);
	}

	animate();
</script>
</html>